<template>
    <div class="home">
      <Header/>
      <div class="content"> 
        <div class="title">{{$t('m.公告列表')}}</div>   
    
     <div class="card" >
      <div class="titles">{{$t('m.公告标题')}}</div>
      <div class="box">
        {{$t('m.公告内容')}}
      </div>  
      <div class="box">
        {{$t('m.公告内容2')}}
      </div>
      <div class="box">
        {{$t('m.公告内容3')}}
      </div>  
      <div class="box">0xB192D4A737430AA61CEA4Ce9bFb6432f7D42592F</div>
      <div class="box">
        {{$t('m.公告内容4')}}
      </div>  
      <div class="box">0xe6d883D4147C23348760d1D135A2E187825979e1</div>
      <div class="box">
        {{$t('m.公告内容5')}}
      </div>  
      <div class="box">0xd97234BCa79c0EB5515cC4e5Af93f99fC2082099</div>
      <div class="box">
        {{$t('m.公告内容6')}}
      </div>  
      <div class="box">0x270db1358993Ab42cf09c681308689Cb65A62619</div>
      <div class="box">
        {{$t('m.公告内容7')}}
      </div>  
      <div class="box">0x0fa6c0Bd9704a7a45B16e0487549B10218A82bAa</div>
      <div class="box">
        {{$t('m.公告内容8')}}
      </div>  
      <div class="box">0xd49fC3E030F9dEA2437BA1069bF9A59026C00eDD</div>
      <div class="box">
        {{$t('m.公告内容9')}}
      </div>  
      <div class="box">0x5434987AeFD45Fd719C77c1Cb7655F57a827D3c3</div>
      <div class="box">
        {{$t('m.公告内容10')}}
      </div> 
      <div class="box">0x6cA90194777398873D9fC8688F8c960077aCCc7E</div> 
      <div class="box">
        {{$t('m.公告内容11')}}
      </div>  
      <div class="box">0xCeA188c6bb0dB78Fd17904C03e28F43AE4e46d5a</div>
      <div class="box">
        {{$t('m.公告内容12')}}
      </div>  
      <div class="box">
        {{$t('m.公告内容13')}}
      </div>  
      <div class="box">
        {{$t('m.公告内容14')}}
      </div>  
      <div class="box">
        {{$t('m.公告内容15')}}
      </div>  
      <div class="box">
        {{$t('m.公告内容16')}}
      </div>  
      <div class="box">
        {{$t('m.公告内容17')}}
      </div>  
      <div class="box">
        {{$t('m.公告内容18')}}
      </div>  
      <div class="box">
        {{$t('m.公告内容19')}}
      </div>  
      <div class="end">{{$t('m.公告署名')}}</div>
      <div class="end">{{$t('m.公告时间')}}</div>
      
     </div>

  <!-- <div v-if="list.length==0"  class="noData">
           <img src="../assets/img/logo.png" alt="" >
           <div class="ttx">{{$t('m.mysj')}}</div>
      </div> -->
    </div>
    <Bottom/>

    
</div>
</template>
<script>
import Header from '../components/header.vue';
import Bottom from '../components/bottom.vue';
export default {
  name: "myContracts",
  components: {Header,Bottom},
  data() {
    return {
        current:0,
        loading:false,
        dcshow:true,
        list:[],
        lists:[],
        lqNum:0,
        lqType:0,
        lqshow:false,
        lqloading:false,
        countNum:0,
        nodePool:0,
        rankPool:0,
        isNode:false,
        userWallet:"",
        userInfo:""
    }
  },
  filters: {
    yingcang(val) {
      if (val) {
        let a = val.replace(/(\w{8})\w+(\w{8})/, "$1...$2");
        return a;
      } else {
        return "";
      }
    },
  },
  created(){
  },
  methods:{
  }
}

</script>
<style lang="scss" scoped>
@import "../../src/assets/scss/_handle.scss";

$t-mf: "PingFang";
$t-f: "DINAlternate-Bold";

.home {
  background:  #130700  no-repeat;
  // background: #161628;
  background-size:contain;
  background-position: center bottom;
  overflow-x: hidden;
  width: 750px;
  margin: 0 auto;
  // min-height: 100vh;
    .content{
        margin-top: 188px;
        // min-height: 100vh;
        margin-bottom: 188px;
        .title{
      font-size: 38px;
      font-weight: bold;
      color: #ffffff;
      margin: 72px auto;
      border-radius: 36px 0 36px 0;
      width: 360px;
      padding: 22px;
      position: relative;
    }
    
        .card {  
          align-items: center;
          border: 2px solid #582204;
      border-radius: 20px;
      background: transparent;
      padding: 30px 40px;
      margin: 20px 30px 20px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .titles{
        font-size: 28px;
          font-weight: 600;
          color: #ffffff;
          width: 100%;
        
          text-align: left;
          position: relative;
          // padding-left: 42px;
          margin-bottom: 10px;
          box-sizing: border-box;
      }
      // .titles::after{
      //   position: absolute;
      // height: 32px;
      // width: 32px;
      // top: calc(50% - 5px);
      // left: 0px;
      // content: "";
      // transform: translateY(-50%);
      // background: #582204;
      // background: url("../assets/img/logo.png") no-repeat ;
      // background-size: 100% 100%;
      // }
      .time{
        font-size: 22px;
        color: #6a6a6a;
        text-align: left;
        padding-bottom: 20px;
        width: 100%;
        margin-bottom: 20px;
        border-bottom: 1px solid #582204 ;
      }
      
      .box{
        width: 100%;
        color: #ffffff;
        text-align: left;
        font-size: 26px;
        margin: 10px 0;
      }
      .end{
        text-align: right;
        width: 100%;
        font-size: 22px;
        color: #ffffff;
        margin: 5px 0;
      }
    }
}
      
}

  </style>
